<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">   
    <title>Document</title>
    <style>
        .demo{
            background-color: palegoldenrod;
        }
    </style>
   
</head>

<body>

<button id="btn">点我创建一个输入框</button>
   <script type="text/javascript">
    // 获取这个按钮,根据id
    const btn = document.getElementById('btn')
    // 绑定点击事件
    btn.onclick = ()=>{
        // 创建元素
        const input = document.createElement('input')

        input.className = 'demo'

        // 放入body中
        document.body.appendChild(input)

        // 出现input框时自动获取焦点
        input.focus()
        input.parentElement.style.backgroundColor = 'skyblue'
    }
   </script>
</body>
</html>